/**
 * vuex 对象操作方法
 * @author heke
 * @version 20170427
 */
import Vue from 'vue'
import _ from 'lodash'
import { Row, TextboxUnit, NumericTextboxUnit, DatePickerUnit } from '../Model'

/**
 * 设置高亮项
 * @param state
 * @param selector
 * @constructor
 * @return {null}
 */
export const SET_SELECTOR = (state, { selector }) => {
    _.assign(state.selector, selector)
}

/**
 * 重置高亮项
 * @param state
 * @returns {null}
 * @constructor
 */
export const RESET_SELECTOR = state => {
    _.assign(state.selector, { rowGid: null, unitGid: null })
}

/**
 * 新增行
 * @param state
 * @param row
 * @constructor
 */
export const INIT_ROW = (state, { row }) => {
    if (_.isNil(row)) {
        row = new Row()
    }
    state.formData.rows.push(row)
    _.assign(state.selector, { rowGid: row.rowGid, unitGid: null })
}

/**
 * 新增控件
 * @param state
 * @param selectedRow
 * @param usableCols
 * @param unitType
 * @param unit
 * @constructor
 */
export const INIT_UNIT = (state, { selector, usableCols, unitType, unit }) => {
    if (_.isNil(unit)) {
        switch (unitType) {
            case 'textboxUnit':
                unit = new TextboxUnit({ rowGid: selector.rowGid, col: usableCols })
                break
            case 'numericTextboxUnit':
                unit = new NumericTextboxUnit({ rowGid: selector.rowGid, col: usableCols })
                break
            case 'datePickerUnit':
                unit = new DatePickerUnit({ rowGid: selector.rowGid, col: usableCols })
                break
        }
    }

    const row = _.find(state.formData.rows, { rowGid: selector.rowGid })
    debugger
    // 行
    if (_.isNil(selector.unitGid)) {
        let units = row.units
        if (!_.isArray(units)) {
            units = []
        }
        units.push(unit)
    } else {
        const idx = _.findIndex(row.units, { unitGid: selector.unitGid })
        if (idx > -1) {
            row.units.splice(idx, 0, unit)
        }
    }

    _.assign(state.selector, { rowGid: unit.rowGid, unitGid: unit.unitGid })
}

export const COPY = (state, { type, context }) => {
    state.clipboard = {
        type,
        context
    }
}

/**
 * 删除行或控件
 * @param state
 * @constructor
 */
export const REMOVE_ROW_OR_UNIT = state => {
    // 所有行
    let rows = state.formData.rows
    // 选中行的所有控件
    let units = _.find(rows, { rowGid: state.selector.rowGid }).units
    // 高亮为选中行
    if (_.isEmpty(state.selector.unitGid)) {
        // 获得行索引
        const rowIdx = _.findIndex(rows, { rowGid: state.selector.rowGid })
        // 删除
        rows.splice(rowIdx, 1)
    } else {
        // 获得控件索引
        const unitIdx = _.findIndex(units, { unitGid: state.selector.unitGid })
        // 删除
        units.splice(unitIdx, 1)
    }
}

/**
 * 设置控件属性
 * @param state
 * @param unit
 * @constructor
 */
export const SET_UNIT = (state, { unit }) => {
    let row = _.find(state.formData.rows, { rowGid: unit.rowGid })
    if (_.isEmpty(row)) {
        throw new Error(`该行不存在: ${unit.rowGid}`)
    }
    let oldUnit = _.find(row.units, { unitGid: unit.unitGid })
    if (_.isEmpty(oldUnit)) {
        throw new Error(`该控件不存在: ${unit.unitGid}`)
    }

    // 利用 Vue 提供的方法赋值以触发重新渲染
    _.keys(oldUnit).forEach(key => {
        if (oldUnit[key] !== unit[key]) {
            Vue.set(oldUnit, key, unit[key])
        }
    })
}

export const RELOAD_ON = state => {
    state.reload = true
}

export const RELOAD_OFF = state => {
    state.reload = false
}
